<template>

    <!-- 用户端 文章管理主页面 布局 -->
    <div class="bg-gray-50 py-8 w-screen dark:bg-gray-900 min-h-screen">

        <div class="max-w-2xl mx-auto px-4 w-full" :class="articleList.length === 0 ? 'loader' : ''">

            <div class="w-full bg-white rounded-lg shadow-sm hover:shadow-md 
                        dark:bg-gray-800 dark:hover:shadow-lg dark:border-gray-700
                        transition-shadow duration-200 p-6 mb-6 border border-transparent
                        dark:hover:border-gray-600" v-for="article in articleList"> <!-- 新增悬停边框 -->

                <!-- 非加密文章数据 v-if就是判断有没有加密的-->
                <div>
                    <!-- 标题部分 -->
                    <div class="flex justify-between relative">
                        <div class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 pr-20">
                            {{ article.title }}
                        </div>

                        <div class="absolute -top-5 -right-5 flex">
                            <div class="m-2 flex ">
                                <!-- 草稿 -->
                                <div v-if="article.status == 'draft'">
                                    <svg t="1749355055019" class="icon fill-black  dark:fill-gray-400"
                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                        p-id="5104" width="30" height="30">
                                        <path
                                            d="M676.977778 0H170.666667C122.311111 0 79.644444 39.822222 79.644444 91.022222v844.8C79.644444 984.177778 122.311111 1024 170.666667 1024h682.666666c8.533333 0 17.066667-2.844444 22.755556-5.688889 34.133333-11.377778 56.888889-42.666667 56.888889-79.644444V256l-256-256z m0 119.466667L813.511111 256h-122.311111c-8.533333 0-14.222222-5.688889-14.222222-14.222222V119.466667z m170.666666 819.2h-682.666666V85.333333h426.666666v156.444445c0 54.044444 42.666667 99.555556 99.555556 99.555555h156.444444v597.333334z"
                                            p-id="5105"></path>
                                        <path
                                            d="M273.066667 523.377778h36.977777v-14.222222h56.888889v14.222222h39.822223v-14.222222h68.266666v-34.133334h-68.266666V455.111111h-39.822223v19.911111h-56.888889V455.111111H273.066667v19.911111H201.955556v34.133334h71.111111zM358.4 645.688889h91.022222v-116.622222H230.4v116.622222h91.022222v17.066667H201.955556v34.133333h116.622222v36.977778h39.822222v-36.977778h116.622222v-34.133333h-116.622222v-17.066667z m-91.022222-88.177778h145.066666v14.222222H267.377778v-14.222222z m0 56.888889v-14.222222h145.066666v14.222222H267.377778zM682.666667 480.711111h-62.577778v25.6H796.444444v-25.6h-71.111111c-2.844444-8.533333-5.688889-17.066667-8.533333-22.755555l-39.822222 5.688888c2.844444 2.844444 2.844444 8.533333 5.688889 17.066667zM637.155556 517.688889v62.577778h139.377777v-62.577778h-139.377777z m102.4 39.822222h-68.266667v-14.222222H739.555556v14.222222z"
                                            p-id="5106"></path>
                                        <path
                                            d="M620.088889 611.555556c-5.688889-11.377778-11.377778-19.911111-17.066667-25.6l-14.222222 8.533333V568.888889h31.288889v-34.133333h-31.288889v-31.288889l28.444444-5.688889-8.533333-34.133334c-28.444444 5.688889-56.888889 8.533333-85.333333 11.377778 2.844444 11.377778 2.844444 22.755556 5.688889 36.977778 8.533333 0 19.911111-2.844444 28.444444-2.844444v28.444444h-34.133333V568.888889h28.444444c-8.533333 22.755556-19.911111 45.511111-31.288889 62.577778 5.688889 17.066667 11.377778 34.133333 14.222223 51.2 8.533333-17.066667 14.222222-36.977778 19.911111-56.888889v105.244444h34.133333v-119.466666c2.844444 8.533333 8.533333 17.066667 11.377778 25.6l19.911111-11.377778v102.4H654.222222v-110.933334h105.244445v59.733334c0 11.377778-5.688889 19.911111-14.222223 17.066666v-65.422222h-76.8V711.111111h28.444445v-11.377778h31.288889c2.844444 8.533333 5.688889 19.911111 8.533333 31.288889 19.911111 0 34.133333-2.844444 39.822222-2.844444s11.377778-5.688889 14.222223-11.377778c2.844444-5.688889 5.688889-14.222222 5.688888-25.6v-96.711111h-170.666666v17.066667z m96.711111 65.422222h-22.755556V654.222222h22.755556v22.755556z"
                                            p-id="5107"></path>
                                    </svg>
                                </div>
                                <!-- 加密 -->
                                <div v-if="article.isEncrypted == 1">
                                    <svg t="1749015889884" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="6991" width="30" height="30">
                                        <path
                                            d="M832 1024H192a128 128 0 0 1-128-128V576a128 128 0 0 1 128-128h64V256a256 256 0 1 1 512 0v192h64a128 128 0 0 1 128 128v320a128 128 0 0 1-128 128zM640 288V256a128 128 0 0 0-256 0v192h256V288z m192 352a64 64 0 0 0-64-64H256a64 64 0 0 0-64 64v192a64 64 0 0 0 64 64h512a64 64 0 0 0 64-64v-192z m-319.392 128H512a71.552 71.552 0 1 1 0.608 0z"
                                            fill="#0090FF" p-id="6992"></path>
                                    </svg>
                                </div>
                            </div>

                            <el-dropdown class="hover:bg-gray-300 dark:hover:bg-slate-600 h-full w-full ">
                                <svg class="icon text-gray-900 dark:text-gray-200" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" width="40" height="40">
                                    <path fill="currentColor"
                                        d="M792.5 367.23V749.55c0 16.53 0.09 33.06 0 49.59-0.02 2.99-0.21 5.95-0.61 8.91 0.36-2.66 0.71-5.32 1.07-7.98a63.996 63.996 0 0 1-4.26 15.23c1.01-2.39 2.02-4.78 3.02-7.17-2.08 4.76-4.69 9.2-7.84 13.33l4.69-6.07a64.622 64.622 0 0 1-10.87 10.87l6.07-4.69a63.993 63.993 0 0 1-13.33 7.84c2.39-1.01 4.78-2.02 7.17-3.02-4.9 2.05-9.97 3.47-15.23 4.26 2.66-0.36 5.32-0.71 7.98-1.07-6.89 0.93-13.97 0.61-20.9 0.61H256.27c-6.31 0-12.62 0.03-18.93 0-3.04-0.01-6.04-0.2-9.05-0.61 2.66 0.36 5.32 0.71 7.98 1.07a63.996 63.996 0 0 1-15.23-4.26c2.39 1.01 4.78 2.02 7.17 3.02-4.76-2.08-9.2-4.69-13.33-7.84l6.07 4.69a64.622 64.622 0 0 1-10.87-10.87l4.69 6.07a63.993 63.993 0 0 1-7.84-13.33c1.01 2.39 2.02 4.78 3.02 7.17-2.05-4.9-3.47-9.97-4.26-15.23 0.36 2.66 0.71 5.32 1.07 7.98-0.99-7.35-0.61-14.94-0.61-22.34v-41.13-61.97-76.48-83.68-84.49-78.94-66.06-46.99c0-6.95-0.02-13.9 0-20.86 0.01-3.06 0.2-6.09 0.61-9.13-0.36 2.66-0.71 5.32-1.07 7.98 0.79-5.25 2.21-10.33 4.26-15.23-1.01 2.39-2.02 4.78-3.02 7.17 2.08-4.76 4.69-9.2 7.84-13.33l-4.69 6.07c3.19-4.05 6.81-7.68 10.87-10.87l-6.07 4.69c4.13-3.15 8.57-5.77 13.33-7.84-2.39 1.01-4.78 2.02-7.17 3.02 4.9-2.05 9.97-3.47 15.23-4.26-2.66 0.36-5.32 0.71-7.98 1.07 6-0.81 12.08-0.61 18.13-0.61h358.01c17.24 0 34.49 0.22 51.73 0h0.73c7.69 0 15.77-3.35 21.21-8.79 5.2-5.2 9.12-13.74 8.79-21.21-0.73-16.25-13.18-30-30-30H260.63c-7.7 0-15.4-0.02-23.1 0-15.98 0.04-31.83 4.1-45.73 12.01-20.54 11.69-36.21 31.99-42.41 54.77-2.99 10.99-3.2 21.93-3.2 33.11V797.64c0 32.32 16.05 62.24 43.65 79.35 16.2 10.04 34.62 13.18 53.31 13.18h513.99c1.52 0 3.04 0.01 4.56 0 8.77-0.05 17.89-1.22 26.28-3.86 12.8-4.03 23.34-10.31 33.61-18.77 3.27-2.69 6.23-5.73 8.89-9.02 3.98-4.93 7.95-9.95 10.92-15.57 6.49-12.24 9.71-24.5 10.9-38.23 0.26-2.95 0.23-5.9 0.23-8.85V765.3v-54.43-69.7-76.64-74.18-63.39-43.93-15.81c0-7.69-3.35-15.77-8.79-21.21-5.2-5.2-13.74-9.12-21.21-8.79-16.28 0.73-30.03 13.19-30.03 30.01z">
                                    </path>
                                    <path fill="currentColor"
                                        d="M826.61 163.31c-1.78 1.7-3.56 3.4-5.35 5.1-4.85 4.63-9.7 9.25-14.55 13.88-7.18 6.84-14.35 13.68-21.53 20.53-8.78 8.38-17.57 16.75-26.35 25.13-9.59 9.15-19.19 18.3-28.78 27.44L701 283.09c-9.03 8.61-18.06 17.22-27.08 25.83-7.63 7.27-15.26 14.55-22.89 21.82-5.49 5.23-10.97 10.46-16.46 15.69-2.6 2.48-5.21 4.95-7.81 7.44-0.11 0.1-0.22 0.21-0.33 0.31-2.93 2.72-4.99 5.94-6.2 9.65-1.88 3.58-2.74 7.43-2.58 11.56-0.16 4.13 0.71 7.98 2.58 11.56 1.21 3.72 3.28 6.94 6.2 9.65l6.07 4.69c4.68 2.71 9.73 4.08 15.14 4.1 2.66-0.36 5.32-0.71 7.98-1.07 5.08-1.43 9.49-4 13.24-7.72 1.78-1.7 3.56-3.4 5.35-5.1 4.85-4.63 9.7-9.25 14.55-13.88 7.18-6.84 14.35-13.68 21.53-20.53 8.78-8.38 17.57-16.75 26.35-25.13 9.59-9.15 19.19-18.3 28.78-27.44l29.05-27.7c9.03-8.61 18.06-17.22 27.08-25.83 7.63-7.27 15.26-14.55 22.89-21.82 5.49-5.23 10.97-10.46 16.46-15.69 2.6-2.48 5.21-4.95 7.81-7.44 0.11-0.1 0.22-0.21 0.33-0.31 2.93-2.72 4.99-5.94 6.2-9.65 1.88-3.58 2.74-7.43 2.58-11.56 0.16-4.13-0.71-7.98-2.58-11.56-1.21-3.72-3.28-6.94-6.2-9.65l-6.07-4.69c-4.68-2.71-9.73-4.08-15.14-4.1-2.66 0.36-5.32 0.71-7.98 1.07-5.09 1.43-9.5 4-13.24 7.72zM445.24 334.44c-4.37 0.04-8.74 0.07-13.11 0.11l-31.49 0.27c-12.65 0.11-25.31 0.21-37.96 0.32-11.01 0.09-22.01 0.19-33.02 0.28-5.31 0.04-10.62 0.06-15.92 0.13h-0.22c-4.13-0.16-7.98 0.71-11.56 2.58-3.72 1.21-6.94 3.28-9.65 6.2-2.93 2.72-4.99 5.94-6.2 9.65-1.88 3.58-2.74 7.43-2.58 11.56 0.36 2.66 0.71 5.32 1.07 7.98 1.43 5.08 4 9.49 7.72 13.24l6.07 4.69c4.68 2.71 9.73 4.08 15.14 4.1 4.37-0.04 8.74-0.07 13.11-0.11l31.49-0.27c12.65-0.11 25.31-0.21 37.96-0.32 11.01-0.09 22.01-0.19 33.02-0.28 5.31-0.04 10.62-0.06 15.92-0.13h0.22c4.13 0.16 7.98-0.71 11.56-2.58 3.72-1.21 6.94-3.28 9.65-6.2 2.93-2.72 4.99-5.94 6.2-9.65 1.88-3.58 2.74-7.43 2.58-11.56-0.36-2.66-0.71-5.32-1.07-7.98-1.43-5.08-4-9.49-7.72-13.24l-6.07-4.69c-4.68-2.72-9.73-4.09-15.14-4.1zM548.76 479.42l-6.25 0.06-17.02 0.15c-8.39 0.07-16.78 0.15-25.17 0.22l-30.59 0.27-33.62 0.3-33.82 0.3c-10.55 0.09-21.1 0.19-31.65 0.28l-26.74 0.24c-6.41 0.06-12.82 0.11-19.22 0.17-3.03 0.03-6.05 0.04-9.08 0.08h-0.39c-4.13-0.16-7.98 0.71-11.56 2.58-3.72 1.21-6.94 3.28-9.65 6.2-2.93 2.72-4.99 5.94-6.2 9.65-1.88 3.58-2.74 7.43-2.58 11.56 0.36 2.66 0.71 5.32 1.07 7.98 1.43 5.08 4 9.49 7.72 13.24l6.07 4.69c4.68 2.71 9.73 4.08 15.14 4.1l6.25-0.06 17.02-0.15c8.39-0.07 16.78-0.15 25.17-0.22l30.59-0.27 33.62-0.3 33.82-0.3c10.55-0.09 21.1-0.19 31.65-0.28l26.74-0.24c6.41-0.06 12.82-0.11 19.22-0.17 3.03-0.03 6.05-0.04 9.08-0.08h0.39c4.13 0.16 7.98-0.71 11.56-2.58 3.72-1.21 6.94-3.28 9.65-6.2 2.93-2.72 4.99-5.94 6.2-9.65 1.88-3.58 2.74-7.43 2.58-11.56-0.36-2.66-0.71-5.32-1.07-7.98-1.43-5.08-4-9.49-7.72-13.24l-6.07-4.69c-4.68-2.71-9.73-4.08-15.14-4.1zM665.18 636.06l-9.41 0.06-25.39 0.15c-12.6 0.07-25.19 0.15-37.79 0.22l-45.79 0.27-50.49 0.3-50.62 0.3c-15.84 0.09-31.68 0.19-47.52 0.28l-39.89 0.24c-9.63 0.06-19.26 0.11-28.88 0.17-4.53 0.03-9.06 0.03-13.59 0.08h-0.59c-7.72 0.05-15.74 3.31-21.21 8.79-2.93 2.72-4.99 5.94-6.2 9.65-1.88 3.58-2.74 7.43-2.58 11.56 0.35 7.76 2.9 15.81 8.79 21.21 5.85 5.37 13.1 8.83 21.21 8.79l9.41-0.06 25.39-0.15c12.6-0.07 25.19-0.15 37.79-0.22l45.79-0.27 50.49-0.3 50.62-0.3c15.84-0.09 31.68-0.19 47.52-0.28l39.89-0.24c9.63-0.06 19.26-0.11 28.88-0.17 4.53-0.03 9.06-0.03 13.59-0.08h0.59c7.72-0.05 15.74-3.31 21.21-8.79 2.93-2.72 4.99-5.94 6.2-9.65 1.88-3.58 2.74-7.43 2.58-11.56-0.35-7.76-2.9-15.81-8.79-21.21-5.85-5.37-13.1-8.84-21.21-8.79z">
                                    </path>
                                </svg>

                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="editArticleMetaInfo(article)">编辑标签</el-dropdown-item>
                                        <el-dropdown-item
                                            @click="navigateTo('/user/editarticle/' + article.id)">编辑内容</el-dropdown-item>
                                        <!-- 如果是草稿才能发布 -->
                                        <el-dropdown-item divided v-if="article.status === 'draft'"
                                            @click="becomePublishedArticleBtn(article)">发布文章</el-dropdown-item>

                                        <el-dropdown-item divided v-if="article.status === 'published'"
                                            @click="becomeDraftArticleBtn(article)">撤为草稿</el-dropdown-item>

                                        <el-dropdown-item divided
                                            @click="currentOperationArticle(article)">删除文章</el-dropdown-item>

                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>

                        </div>
                    </div>

                    <!-- 副标题 -->
                    <p class="text-gray-500 dark:text-gray-400 text-sm mb-4">
                        {{ article.subtitle }}
                    </p>

                    <!-- 元数据 -->
                    <div class="flex flex-wrap items-center text-sm text-gray-500 dark:text-gray-400 gap-4">
                        <!-- 作者 -->
                        <div class="flex items-center group">
                            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
                                fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                            </svg>
                            <span class="group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors">
                                {{ article.author }}
                            </span>
                        </div>

                        <!-- 分隔竖线 -->
                        <div class="h-4 w-px bg-gray-200 dark:bg-gray-600"></div>

                        <!-- 发布时间 -->
                        <div class="flex items-center group">
                            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
                                fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <span class="group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors">
                                {{ article.createdAt }}
                            </span>
                        </div>

                        <!-- 分隔竖线 -->
                        <div class="h-4 w-px bg-gray-200 dark:bg-gray-600"></div>

                        <!-- 标签 -->
                        <div class="flex items-center group" v-for="tag in article.tags">
                            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
                                fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M7 7h.01M7 3h5a2 2 0 012 2v5.82a5 5 0 00.629 2.507l2.881 4.192a.999.999 0 01-.813 1.589H7a2 2 0 01-2-2V5a2 2 0 012-2z" />
                            </svg>
                            <span class="group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors">
                                {{ tag.name }}
                            </span>
                        </div>

                        <!-- 分隔竖线 -->
                        <div class="h-4 w-px bg-gray-200 dark:bg-gray-600"></div>

                        <!-- 浏览量 -->
                        <div class="flex items-center group">
                            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
                                fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                            </svg>
                            <span class="group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors">
                                {{ article.views }}
                            </span>
                        </div>
                        <!-- 分隔竖线 -->
                        <div class="h-4 w-px bg-gray-200 dark:bg-gray-600"></div>

                        <!-- 评论数 -->
                        <div class="flex items-center group">
                            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
                                fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                            </svg>
                            <span class="group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors">
                                123
                            </span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!------------------------------- 编辑文章Meta信息的div ------------------------>
    <div class="">
        <el-dialog v-model="editLabelVisible" title="文章标签编辑" class="">

            <el-form class="w-full h-full" :model="article">
                <el-form-item label="标题" prop="label">
                    <el-input placeholder="文章的题目" v-model="article.title"></el-input>
                </el-form-item>

                <el-form-item label="副标题" prop="subtitle">
                    <el-input placeholder="文章的副标题" v-model="article.subtitle"></el-input>
                </el-form-item>

                <el-form-item label="标签" prop="author">
                    <el-input placeholder="文章的标签"></el-input>
                </el-form-item>

                <div>
                    <span class="pr-4">是否加密 ：</span>
                    <el-switch v-model="isEncrpted" />
                </div>

                <!-- 新增加密密码输入框 -->
                <el-form-item label="加密密码" v-if="isEncrpted">
                    <el-input placeholder="请输入加密密码" v-model="article.password" type="password" show-password />
                </el-form-item>

            </el-form>

            <div class="flex justify-between">
                <div></div>
                <button @click="updateArticleMetaBtn()"
                    class=" bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                    type="button">
                    提交
                </button>
            </div>
        </el-dialog>
    </div>

    <!-- 删除文章的div -->
    <div>
        <el-dialog v-model="deleteArticleDialog" title="警告" width="500">
            <div class="flex justify-center items-center">您确定删除这篇文章吗</div>
            <template #footer>
                <div class="flex justify-between">
                    <el-button @click="deleteArticleDialog = false">取消</el-button>
                    <el-button type="danger" @click="deleteArticleByIdBtn()">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>


    <div class="fixed bottom-8 right-4 z-50">
        <button @click="openCreateArticleBtn" class="p-3 w-12 h-12 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center scale-100 
         hover:bg-slate-500 dark:hover:bg-slate-100
            ">
            <svg t="1749358200092" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="6143" width="200" height="200">
                <path
                    d="M190.836364 0h477.090909L930.909091 272.290909v651.636364c0 53.527273-44.218182 97.745455-97.745455 97.745454H190.836364C137.309091 1024 93.090909 979.781818 93.090909 926.254545V97.745455C93.090909 44.218182 137.309091 0 190.836364 0z"
                    fill="#FA944A" p-id="6144"></path>
                <path
                    d="M674.909091 4.654545L935.563636 279.272727h-165.236363C709.818182 279.272727 674.909091 225.745455 674.909091 181.527273V4.654545zM349.090909 558.545455h325.818182c25.6 0 46.545455 20.945455 46.545454 46.545454s-20.945455 46.545455-46.545454 46.545455H349.090909c-25.6 0-46.545455-20.945455-46.545454-46.545455s20.945455-46.545455 46.545454-46.545454z"
                    fill="#FFD7BA" p-id="6145"></path>
                <path
                    d="M465.454545 768V442.181818c0-25.6 20.945455-46.545455 46.545455-46.545454s46.545455 20.945455 46.545455 46.545454v325.818182c0 25.6-20.945455 46.545455-46.545455 46.545455s-46.545455-20.945455-46.545455-46.545455z"
                    fill="#FFD7BA" p-id="6146"></path>
            </svg>
        </button>
    </div>

    <!-- 发布文章 草稿 等操作的对话框-->
    <div class="">
        <el-dialog v-model="addArticleDialog" title="发布文章">

            <el-form class="w-full h-full" :model="article">
                <el-form-item label="标题" prop="title">
                    <el-input placeholder="文章的标题" v-model="article.title"></el-input>
                </el-form-item>
                <el-form-item label="副标题" prop="subtitle">
                    <el-input placeholder="文章的副标题" v-model="article.subtitle"></el-input>
                </el-form-item>
                <div>
                    <span class="pr-4">是否加密 ：</span>
                    <el-switch v-model="isEncrpted" />
                </div>
                <!-- 新增加密密码输入框 -->
                <el-form-item label="加密密码" v-if="isEncrpted">
                    <el-input placeholder="请输入加密密码" v-model="article.password" type="password" show-password />
                </el-form-item>
                <div>
                    <span class="pr-4">存为草稿 ：</span>
                    <el-switch v-model="isDraft" />
                </div>

            </el-form>

            <div class="flex justify-between">
                <div></div>
                <button @click="createArticleBtn()"
                    class=" bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                    type="button">
                    提交
                </button>
            </div>

        </el-dialog>
    </div>
</template>

<script setup lang="ts">
// ----------系统
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// ------------type
import type { ArticleInter, TagsInter } from '../../../ts/types/article';
import { ElMessage } from 'element-plus';

const editLabelVisible = ref(false)// 控制文章标签编辑对话框的显示和隐藏 
const deleteArticleDialog = ref(false)  // 删除文章弹出的确认对话框
const addArticleDialog = ref(false) //右下角发布文章按钮
const isDraft = ref(false) //是否为草稿
const isEncrpted = ref(false) //是否加密
let router = useRouter()
function navigateTo(path: string) {
    router.push(path)
}
// --------------------文章标签----------------
const tagsStringType = ref<string[]>([]); //用来优化操作的 string类型
const tagsTagType = ref<TagsInter[]>([]); //这个表示当前文章拥有的标签列表 标签类型
// ------------前端按钮响应方法----------

// 为当前操作文章赋值方法
function currentOperationArticle(item: ArticleInter) {
    article.value = item
    deleteArticleDialog.value = true
}

// 编辑文章meta信息按钮
function editArticleMetaInfo(item: ArticleInter) {
    editLabelVisible.value = true
    article.value = item
    tagsTagType.value = item.tags

    tagsStringType.value = item.tags.map(tag => tag.name)


}
// 点击发布文章按钮
function openCreateArticleBtn() {
    addArticleDialog.value = true
    article.value = {} as ArticleInter
}

// -----------------------发送请求相关--------------------

let articleList = ref<ArticleInter[]>([]) //文章列表

articleList.value = [
    {
        "id": 16,
        "author": "菜鸟拯救世界",
        "title": "加密万年长",
        "subtitle": "加密的文章",
        "createdAt": "2025-06-13",
        "updatedAt": "2025-06-18 18:05",
        "views": 999,
        "stickyWeight": 0,
        "status": "published",
        "isEncrypted": 1,
        "tags": []
    },
    {
        "id": 26,
        "author": "name",
        "title": "6",
        "subtitle": "8",
        "createdAt": "2025-06-17",
        "updatedAt": "2025-06-18 17:55",
        "views": 0,
        "stickyWeight": 0,
        "status": "published",
        "isEncrypted": 0,
        "tags": [
            {
                "id": 1,
                "type": "article",
                "name": "java"
            },
            {
                "id": 2,
                "type": "article",
                "name": "vue前端开发"
            }
        ]
    },
    {
        "id": 27,
        "author": "name",
        "title": "7",
        "subtitle": "888888888",
        "createdAt": "2025-06-17",
        "updatedAt": "2025-06-17 18:02",
        "views": 0,
        "stickyWeight": 0,
        "status": "published",
        "isEncrypted": 1,
        "tags": []
    },
    {
        "id": 28,
        "author": "name",
        "title": "8",
        "subtitle": "99999999",
        "createdAt": "2025-06-17",
        "updatedAt": "2025-06-18 17:59",
        "views": 0,
        "stickyWeight": 0,
        "status": "published",
        "isEncrypted": 0,
        "tags": []
    }
]


let article = ref<ArticleInter>({} as ArticleInter)

// 创建文章表单提交
async function createArticleBtn() {
    addArticleDialog.value = false
    article.value.isEncrypted = isEncrpted.value ? 1 : 0;
    article.value.status = isDraft.value ? 'draft' : 'published'
    let data = await createArticle(article.value);
    ElMessage.success(String(data.message))
}
// 删除文章ById
async function deleteArticleByIdBtn() {
    deleteArticleDialog.value = false
    let data = await deleteArticleById(article.value.id)
    if (data?.code === 200) {
        ElMessage.success(String(data.message))
    } else {
        ElMessage.success(String(data?.message))
    }
}
// 更新文章meta信息
async function updateArticleMetaBtn() {
    editLabelVisible.value = false
    let data = await updateArticleMeta(article.value)
    if (data?.code === 200) {
        ElMessage.success(String(data.message))
    } else {
        ElMessage.success(String(data?.message))
    }
}

// 发布为文章的按钮 调用的还是更新文章信息的接口
async function becomePublishedArticleBtn(article: ArticleInter) {
    article.status = 'published'

    let data = await updateArticleMeta(article)
    if (data?.code === 200) {
        ElMessage.success(String(data.message))
    } else {
        ElMessage.success(String(data?.message))
    }
}
// 撤为草稿的文章按钮 调用的还是更新文章信息的接口
async function becomeDraftArticleBtn(article: ArticleInter) {
    article.status = 'draft'

    let data = await updateArticleMeta(article)
    if (data?.code === 200) {
        ElMessage.success(String(data.message))
    } else {
        ElMessage.success(String(data?.message))
    }
}



</script>

<style scoped>
/* ::v-deep .el-dialog { */
:deep(.el-dialog) {
    /* 移动端默认宽度 */
    width: 80% !important;
    height: auto !important;

    /* md 断点及以上 (≥768px) */
    @media (min-width: theme('screens.md')) {
        width: 50% !important;
    }
}

/* 在你的样式文件中添加 */
:deep(.el-dialog__title) {
    display: flex;
    justify-content: center;
}
</style>